<template>
  <div>
    <div class="login_container" v-if="login_or_register">
      <div class="logindata">
        <div class="logintext">
          <h2>欢迎登录智慧餐厅</h2>
        </div>
        <div>
          <el-form :model="loginForm" label-width="60px">
            <el-form-item label="账号" prop="username">
              <el-input
                v-model="loginForm.username"
                prefix-icon="el-icon-user"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                type="password"
                v-model="loginForm.password"
                prefix-icon="el-icon-lock"
              ></el-input>
            </el-form-item>
            <el-form-item label="身份" prop="id_kind">
              <el-input
                v-model="loginForm.id_kind"
                prefix-icon="el-icon-user"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="butt">
          <el-button type="primary" @click="login">确认登录</el-button>
          <el-button type="primary" @click="switch_container">去注册</el-button>
        </div>
      </div>
    </div>
    <div class="login_container" v-if="!login_or_register">
      <div class="logindata">
        <div class="logintext">
          <h2>欢迎注册智慧餐厅</h2>
        </div>
        <div>
          <el-form :model="registerForm" label-width="60px">
            <el-form-item label="账号" prop="username">
              <el-input
                v-model="registerForm.username"
                prefix-icon="el-icon-user"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                type="password"
                v-model="registerForm.password"
                prefix-icon="el-icon-lock"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="password">
              <el-input
                type="password"
                v-model="registerForm.confirmed_password"
                prefix-icon="el-icon-lock"
              ></el-input>
            </el-form-item>
            <el-form-item label="身份" prop="id_kind">
              <el-input
                v-model="registerForm.id_kind"
                prefix-icon="el-icon-user"
              ></el-input>
            </el-form-item>
            <el-form-item label="邀请码" prop="invitation_code">
              <el-input
                v-model="registerForm.invitation_code"
                prefix-icon="el-icon-user"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="butt">
          <el-button type="primary" @click="register">确认注册</el-button>
          <el-button type="primary" @click="switch_container">去登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "@/util/http";
import { ref, reactive } from "vue";
import { useStore } from "vuex";
import router from "@/router";
import { ElNotification } from "element-plus";

export default {
  setup() {
    // 全局数据仓库
    let store = useStore();

    // 登录表单
    let loginForm = reactive({
      username: "",
      password: "",
      id_kind: "",
    });

    // 注册表单
    let registerForm = reactive({
      username: "",
      password: "",
      confirmed_password: "",
      id_kind: "",
      invitation_code: "",
    });

    // 控制哪个模块显示（登录/注册）
    let login_or_register = ref(true);

    // 发送登录请求
    const login = () => {
      axios.post("/user/login/", loginForm).then((res) => {
        let result = res.data;
        if (result.code == 200) {
          // 取出token并存储
          let token = result.data.token;
          store.state.user.jwt_token = token;
          localStorage.setItem("jwt_token", token);
          // 清空登陆页面数据
          loginForm = reactive({});
          // 弹出提示框
          ElNotification({
            title: "登陆成功",
            type: "success",
          });
          // 路由导航到home页面
          router.push({ name: "home" });
        } else {
          ElNotification({
            title: "登陆失败:",
            message: res.data.message,
            type: "error",
          });
        }
      });
    };

    // 发送注册请求
    const register = () => {
      axios.post("/user/register/", registerForm).then((res) => {
        if (res.data.code == 200) {
          // 清空注册页面信息
          registerForm = reactive({});
          // 提示
          ElNotification({
            title: "注册成功",
            type: "success",
          });
          // 跳转到登陆页面(隐藏注册组件)
          switch_container();
        } else {
          ElNotification({
            title: "注册失败：",
            message: res.data.message,
            type: "error",
          });
        }
      });
    };

    // 改变页面（登录/注册）
    const switch_container = () => {
      login_or_register.value = !login_or_register.value;
      console.log(login_or_register.value);
    };

    return {
      login,
      register,
      switch_container,
      loginForm,
      registerForm,
      login_or_register,
    };
  },
};
</script>

<style scoped>
.logintext {
  margin-bottom: 20px;
  line-height: 50px;
  text-align: center;
  font-size: 30px;
  font-weight: bolder;
  color: white;
  text-shadow: 2px 2px 4px #000000;
}
.butt {
  margin-top: 10px;
  text-align: center;
}
.logindata {
  width: 400px;
  height: 300px;
  transform: translate(-50%);
  margin-left: 50%;
}
.tool {
  display: flex;
  justify-content: space-between;
  color: #606266;
}
.login_container {
  /* // background-color: #2b5b6b;
    // height: 100%; */
  width: 100%;
  height: 100%;
  min-width: 1000px;
  background-image: url("@/assets/login1.jpg");
  /* background-color:orange; */
  background-size: 100% 100%;
  background-position: center center;
  overflow: auto;
  background-repeat: no-repeat;
  position: fixed;
  line-height: 100%;
  padding-top: 150px;
}
.login_box {
  margin-bottom: 20px;
  line-height: 50px;
  text-align: center;
  font-size: 30px;
  font-weight: bolder;
  color: white;
  text-shadow: 2px 2px 4px #000000;
}
</style>